<template>
  <div id="admin">
    <div class="titleBar">
      <div>红线指标</div>
      <div>
        <el-button type="primary" @click="add_redAudit()">新增指标</el-button>
      </div>
    </div>
    <div class="tabBar">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index" width="60" align="center">
        </el-table-column>
        <el-table-column prop="text" label="指标"> </el-table-column>
        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
              @click="updateThisRedAudit(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteThisRedAudit(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 指标 -->
    <div class="dialog">
      <el-dialog
        title="新建指标"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="指标描述" prop="text">
              <el-input v-model="form.text" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="(dialogVisible = false), cancel(form)"
            >取 消</el-button
          >
          <el-button type="primary" @click="push_redAudit('form', form)"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  allMetrics,
  deleteMetrics,
  updataMetrics,
  addMetrics,
} from "@/api/metrics";

export default {
  data() {
    return {
      dialogVisible: false,
      isAdd: 1,
      tableData: [],

      form: {
        text: "",
      },

      //验证规则
      rules: {
        text: [{ required: true, message: "请输入指标内容", trigger: "blur" }],
      },
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.getRedAudit();
    },

    //获取所有指标
    getRedAudit() {
      allMetrics().then((res) => {
        this.tableData = res.data;
      });
    },

    //提交指标
    push_redAudit(form, data) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            addMetrics(data).then((res) => {
              if (res.code == 0) {
                this.dialogVisible = false;
                this.$refs[form].resetFields();
                this.init();
                this.$message({
                  type: "success",
                  message: "添加成功",
                  center: true,
                  showClose: true,
                });
              }
            });
          } else {
            updataMetrics(data).then((res) => {
              if (res.code == 0) {
                this.dialogVisible = false;
                this.$refs[form].resetFields();
                this.init();
                this.$message({
                  type: "success",
                  message: "修改成功",
                  center: true,
                  showClose: true,
                });
              }
            });
          }
        }
      });
    },

    //增加指标
    add_redAudit() {
      this.isAdd = 1;
      this.dialogVisible = true;
    },

    //修改该学院的信息
    updateThisRedAudit(row) {
      this.isAdd = 0;
      this.dialogVisible = true;
      this.$nextTick(function () {
        this.form = Object.assign({}, row);
      });
    },

    //删除该学院
    deleteThisRedAudit(data) {
      let id = {
        id: data.id,
      };
      deleteMetrics(id).then((res) => {
        if (res.code == 0) {
          this.init();
          this.$message({
            type: "success",
            message: "删除成功",
            center: true,
            showClose: true,
          });
        }
      });
    },

    //关闭弹窗
    handleClose(done) {
      done();
      this.$refs.form.resetFields();
    },

    // 取消按钮
    cancel(form) {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
#admin {
  height: calc(100vh - 84px);
  width: 100%;
  background-color: #ffffff;
  padding: 0 20px 0 0;
  overflow: auto;

  .titleBar {
    border-bottom: 1px solid #0000002e;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: space-between;
    // margin-bottom: 20px;
    margin-left: 20px;
  }

  .tabBar {
    height: calc(100vh - 174px);
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-left: 20px;
  }
}
</style>